<template>
	<div id="weixin">
		<!-- <div>
			<el-row class="wrapNav" v-for="(item,i) in articleList " :key="item.id">
				<el-col :span="24">
					<el-col :span="2" class="chooseNav">
						<h3>{{item.title}}</h3>
					</el-col>
					<el-col :span="22" class="listNav" :ref="item.radio">
						<el-radio-group v-model="itemRadio[i]" @change="radioCheck">
							<el-radio-button :label="itemList" v-for="(itemList,index) in item.list" :key="index"></el-radio-button>
						</el-radio-group>
					</el-col>
				</el-col>
			</el-row>
		</div> -->
		<busTitleList :busDataTitle="articleList" v-on:sendSelectRad="getSelectRad"></busTitleList>
		<div class="wrapDataList">
			<el-row justify="end" type="flex">
				<el-col :span="24" style="display: flex;">
					<i class="el-icon-refresh" @click="handleReload"></i>
					<div style="">
						<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="wrapTbale">
			<el-row>
				<el-col :span="24">
					<el-table :data="tableData" border style="width: 100%" stripe :header-cell-style="{'background-color': '#FAFAFA','font-size': '16px','font-weight': 'bold','color' : '#66667d'}"
					 v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
					 element-loading-background="rgba(246, 246, 246, 0.8)">
						<el-table-column label="图片" width="150" align="center">
							<template slot-scope="scope">
								<img :src="scope.row.userHead" alt="" width="120" height="60">
							</template>
						</el-table-column>
						<el-table-column prop="name" label="昵称" width="150" align="center">
						</el-table-column>
						<el-table-column prop="ygHeadlinePrice" label="硬广头条" width="120" align="center">
						</el-table-column>
						<el-table-column prop="rgHeadlinePrice" label="软广头条" width="120" align="center">
						</el-table-column>
						<el-table-column prop="ygNextlinePrice" label="硬广次条" width="120" align="center">
						</el-table-column>
						<el-table-column prop="rgNextlinePrice" label="软广次条" width="120" align="center">
						</el-table-column>
						<el-table-column prop="fanNum" label="参考粉丝数" width="120" align="center">
						</el-table-column>
						<el-table-column prop="authTypeStr" label="认证类型" width="" align="center">
						</el-table-column>
						<el-table-column prop="readNum" label="阅读数" width="" align="center">
						</el-table-column>
						<el-table-column prop="receiveTimeStr" label="接稿时间" width="" align="center">
						</el-table-column>
						<el-table-column prop="publishTime" label="平均出稿时间" width="" align="center">
						</el-table-column>
						<el-table-column prop="remarkDesc" label="备注" width="" align="center">
						</el-table-column>
						<el-table-column prop="operation" label="操作" align="center" width="240" fixed = "right">
							<template slot-scope="scope">
								<div class="operation">
									<button class="operbtn"><router-link :to="'sourec02/'+ scope.row.id" target="_blank">查看</router-link></button>
									<button class="operbtn" @click="singleOrder(scope.row.id)">下单</button>
								</div>
							</template>

						</el-table-column>

					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[30, 50]" layout="prev, pager, next, jumper,total, sizes" :total="tableTotal">
					</el-pagination>
				</el-col>


			</el-row>
		</div>
	</div>

</template>

<script>
	import busTitleList from '../../components/v-business.vue'
	export default {
		components: {
			busTitleList
		},
		data() {
			return {
				articleList: [{
						id: 1,
						title: "地区",
						radio: "radio1",
						list: [{
								cityCode: "010",
								city: "北京市"
							}, {
								cityCode: "020",
								city: "上海市"
							}, {
								cityCode: "050",
								city: "广东省"
							}, {
								cityCode: "050090",
								city: "深圳市"
							}, {
								cityCode: "040",
								city: "重庆市"
							}, {
								cityCode: "260",
								city: "山西省"
							}, {
								cityCode: "120",
								city: "贵州省"
							}, {
								cityCode: "290",
								city: "西藏自治区"
							}, {
								cityCode: "220",
								city: "内蒙古自治区"
							}, {
								cityCode: "240",
								city: "青海省"
							}, {
								cityCode: "100",
								city: "甘肃省"
							}, {
								cityCode: "270",
								city: "陕西省"
							}, {
								cityCode: "310",
								city: "云南省"
							}, {
								cityCode: "280",
								city: "四川省"
							},
							{
								cityCode: "130",
								city: "海南省"
							}, {
								cityCode: "180",
								city: "湖南省"
							}, {
								cityCode: "170",
								city: "湖北省"
							}, {
								cityCode: "150",
								city: "河南省"
							}, {
								cityCode: "250",
								city: "山东省"
							}, {
								cityCode: "200",
								city: "江西省"
							}, {
								cityCode: "090",
								city: "福建省"
							}, {
								cityCode: "080",
								city: "安徽省"
							}, {
								cityCode: "070",
								city: "浙江省"
							}, {
								cityCode: "060",
								city: "江苏省"
							}, {
								cityCode: "160",
								city: "黑龙江省"
							}, {
								cityCode: "190",
								city: "吉林省"
							}, {
								cityCode: "210",
								city: "辽宁省"
							}, {
								cityCode: "140",
								city: "河北省"
							}
						]
					},
					{
						id: 2,
						title: "分类",
						radio: "radio2",
						list: ["娱乐", "音乐", "美食", "电影", "休闲", "时尚", "美容", "购物", "家居生活", "星座命理", "情感心理", "新闻资讯", "宠物", "文艺", "生活/百科",
							"IT/互联网", "摄影旅游", "幽默搞笑", "母婴育儿", "财经", "汽车", "广告/营销", "游戏动漫", "健康养生", "体育/健身", "教育培训", "微商", "军事", "两性",
							"房地产"
						]
					},
					{
						id: 3,
						title: "粉丝数量",
						radio: "radio3",
						list: ["小于1万", "1-5万", "5-10万", "10-50万", "50-100万", "大于100万"]
					},
					{
						id: 4,
						title: "阅读数量",
						radio: "radio4",
						list: ["小于1万", "1-5万", "5-10万", "大于10万"]
					},
					{
						id: 5,
						title: "价格区间",
						radio: "radio5",
						list: ["小于1000元", "1000-1500元", "1500-5000元", "5000-10000元", "1-5万元", "大于5万元"]
					},

				],
				selectData: "媒体列表",
				input5: '', //搜索的关键字
				// 表格显示的数据
				tableData: [],
				mediaParams: "",
				loading: false,
				currentPage: 1,
				pageSize: 30,
				tableTotal: 0,
			}
		},
		methods: {
			//获取选中的数据
			getSelectRad(data) {
				// console.log(data)
				var sendData = {}
				for (var i = 0; i < data.length; i++) {
					switch (data[i].id) {
						case 1: //地区
							sendData.openCity = data[i].cityCode
							break;
						case 2: //分类
							sendData.resourceType = String(data[i].attrNum)
							break;
						case 3: //粉丝数量
							sendData.fanNum = String(data[i].attrNum)
							break;
						case 4: //阅读数量
							sendData.readNum = data[i].attrNum
							break;
						case 5: //价格区间
							sendData.ygHeadlinePrice = data[i].attrNum
							break;
						default:
							break;
					}
				}
				this.currentPage = 1
				this.pageSize = 30
				sendData.page = 1
				sendData.size = 30
				// console.log(this.selectData)
				this.mediaParams = sendData
				this.mediaQuerydata(sendData)
			},
			// 刷新按钮
			handleReload() {
				this.mediaQuerydata("load")
				this.input5 = ""
			},
			// 查询数据
			searchData() {
				console.log(this.input5)
				var searchStr = this.mediaParams
				searchStr.name = this.input5
				this.mediaQuerydata(searchStr)
			},
			//商品下单
			singleOrder(id) {
				console.log(id)
				if (id == "null") {
					this.$message({
						message: '支付接口暂未提供',
						type: 'success',
						offset: 500,
					});
					console.log(this.checkedCities)
				} else {
					console.log(id)
					this.$message({
						message: '支付接口暂未提供',
						type: 'success',
						offset: 500,
					});
				}
			},
			// 分页
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val
				var mediaParams = this.mediaParams
				mediaParams.page = val
				this.mediaQuerydata(mediaParams)
			},
			// ======================================================查询数据方法=======================================================================================
			// 媒体列表数据查询
			mediaQuerydata(params) {
				console.log(params)
				var data = ""
				if (params == undefined || params == "load") {
					data = {
						identity: "0",
						page: 1,
						upUnderShelf: "1",
						size: this.pageSize
					}
					this.mediaParams = data
				} else {
					data = params
					data.size = this.pageSize
					data.upUnderShelf = "1"
					this.mediaParams = params
				}
				this.$api.mediaMall.wxArticle(data).then((res) => {
					console.log(res)
					if (res.status == 200) {
						this.tableTotal = res.data.totalCount
						this.loading = true;
						setTimeout(() => {
							params == "load" ? this.selectData = "媒体列表" : ""
							this.tableData = res.data.data
							this.loading = false;
						}, 1000)
					}
				})
			},
		},
		mounted() {
			this.mediaQuerydata()
		},

	}
</script>

<style>
	.el-table .cell {
		width: 1000px;
	}

	#weixin {
		max-height: 775px;
		overflow-y: scroll;
		margin-bottom: 30px;
		position: relative;
	}

	#weixin .iconfont {
		font-size: 26px;
	}

	#weixin .icon-gouwuchekong {
		line-height: 44px;
		margin-left: 40px;
		position: relative;
		cursor: pointer;
	}

	#weixin span.el-radio-button__inner {
		border: 0;
		padding: 5px 7px;
	}

	#weixin .el-radio-button:first-child .el-radio-button__inner {
		border: 0;
		border-radius: 0;
	}

	#weixin .el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background: #ff6e19;
		box-shadow: none;
	}

	#weixin .el-radio-button:last-child .el-radio-button__inner {
		border-radius: 0;
	}

	#weixin .el-radio-button__inner:hover {
		background: #ff6e19 !important;
		color: #fff;
	}

	#weixin .wrapNav {
		padding: 3px;
		height: auto;
		background: #fff;
	}

	#weixin .chooseNav {
		background: #F6F6F6;
		padding: 10px;
		text-align: center;
		height: 100%;
	}

	#weixin .listNav {
		padding-left: 20px;
	}

	/* 数据列表开始 */
	#weixin .wrapDataList {
		margin-top: 5px;
		background: #fff;
		padding: 5px;
		position: absolute;
		top: 200px;
		z-index: 500;
		width: 320px;
		right: 0;
	}

	#weixin .topHeader .el-input {
		margin-top: 4px;
	}

	#weixin .topHeader .el-input__inner {
		height: 35px;
		line-height: 35px;
	}

	#weixin .el-icon-refresh {
		font-size: 25px;
		color: #ff6e19;
		padding: 0 10px;
		line-height: 44px;
		cursor: pointer;
	}

	#weixin .wrapDataList span.el-radio-button__inner {
		border: 0;
		padding: 15px 20px;
		background: #f2f2f2;
		margin: 0 5px;
	}

	#weixin .shopCartTotal {
		width: 20px;
		height: 20px;
		position: absolute;
		background: #ff6e19;
		top: 3px;
		left: 15px;
		border-radius: 50%;
	}

	#weixin .shopCartTotal b {
		color: #fff;
		line-height: 20px;
		font-size: 18px;
		position: absolute;
		left: 5px;
	}

	#weixin .wrapTbale .operation span {
		color: #FF6E19;
		font-size: 27px;
		position: relative;
		top: 5px;
		cursor: pointer;
	}

	#weixin .wrapTbale .operbtn {
		margin: 0 5px;
		padding: 2px 3px 0;
		cursor: pointer;
	}

	#weixin .wrapTbale .operation button:first-of-type {
		background: #fff;
		color: #555;
		border: 1px solid #c9c9c9;
	}

	#weixin .wrapTbale .operation button:not(:first-of-type) {
		background: #ff6e19;
		color: #fff;
	}

	#weixin .el-pagination {
		background: #fff;
		border: 1px solid #EBEEF5;
		padding: 5px 5px;
	}

	/* 模态框部分 */
	#shopShowModal {}

	.el-dialog__body {
		min-height: 500px;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #FF6E19;
		border-color: #FF6E19;
	}

	.el-checkbox__inner:hover {
		border-color: #FF6E19;
	}

	.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #FF6E19;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	#shopShowModal .bottom {
		padding: 20px 0;
	}

	#shopShowModal .bottom>div:first-child {
		border-top: 1px solid #e0e0e0;
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 20px 0;
	}

	#shopShowModal .bottom>div:first-child .checkAll,
	.total,
	.price {
		margin-left: 30px;
	}

	#shopShowModal .bottom>div:first-child .place {
		position: absolute;
		right: 30px;
		background: #ff6e19;
		color: #fff;
		padding: 2px 10px;
		cursor: pointer;
	}
</style>
